<template>
    <file-system-vue ref="filesystem" class="min-w-fit"></file-system-vue>
    <div class="flex-grow relative w-full overflow-hidden">
        <div class="flex flex-row hover:bg-gray-50">
            <div class="flex-grow"></div>
            <div class="mr-4 px-2 cursor-default hover:bg-gray-100 text-center" @click="closeFile">x</div>
        </div>
        <DrawerVue ref="drawer" v-show="show.drawer"></DrawerVue>
        <Empty v-show="!show.drawer" description="请打开一个文件">
            <Button @click="createFile">创建一个新文件</Button>
        </Empty>

        <Tips class="w-24 h-24 absolute bottom-0 right-0 bg-slate-100" :data="lookingNodeData"></Tips>
    </div>
    <popup v-model:show="show.editor" position="right" class="w-1/3 h-full">
        <h3>模块类型 {{ Type }}</h3>
        <FromEditorVue @submit="changeData" :rules="form"></FromEditorVue>
    </popup>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { Popup, Empty, Button } from 'vant'
import fileSystemVue from '@/components/fileSystem.vue';
import DrawerVue from '@/components/Drawer.vue';
import FromEditorVue from '@/components/FromEditor/FromEditor.vue';
import { hub, useStore } from '@/store/Drawer';
import { fileSave } from 'browser-fs-access';
import { Graph } from '@@/Editor/src/MyGraph';
import { Node } from '@antv/x6';
import { Template } from '@@/transfer/src/Nodes/types';
import Tips from '@/components/tips/tips.vue';

const tipsTemplate = () => ({
    name: "",
    callback: "",
    type: 'Selector'
} as Template)

const drawer = ref()
const filesystem = ref()
const show = reactive({
    editor: false,
    tips: false,
    drawer: true
})
const lookingNodeData = reactive(tipsTemplate())

let Type = ref('')
let form = ref([
    ['基础值', '232', {}]
] as [string, string, any][])
let NODE: Node
const changeData = () => {
    form.value.forEach(([key, value]) => {
        NODE.setAttrByPath(`data/${key}`, value)
    })
    console.log(NODE.attr());
    show.editor = false
}
const closeFile = () => {
    show.drawer = false
}
const selectedNode = (node: Node) => {
    const { type, name = '', callback = '' }: Template = (node.attr().data as any)
    Type.value = type
    const From: [string, string, any][] = [
        ['name', name, { require: true, message: "请填入模块名称" }],
        ['callback', callback, {
            require: true,
            message: "请填入回调函数"
        }]
    ]
    form.value = From
}

const createFile = () => {
    show.drawer = true
}
onMounted(() => {
    const graph: Graph = drawer.value.getGraph();
    (window as any).graph = graph
    hub.on('openFile', () => {
        graph.fromJSON(useStore().treeData)
    })

    // 导出文件的功能
    hub.on('exposeFile', () => {
        fileSave(new Blob([JSON.stringify(graph.toJSON())]))
    })
    //保存功能
    graph.bindKey(["ctrl+s", "meta+s"], (e) => {
        e.preventDefault()
        useStore().writeFile(JSON.stringify(graph.toJSON()))
        console.log('保存成功');
    });
    graph.on('node:click', ({ node }) => {
        const num = graph.getSelectedCellCount()
        if (num === 1) {
            NODE = node
            selectedNode(node)
            show.editor = true
        }
    });

    graph.on('node:mouseenter', ({ node }) => {

        Object.assign(lookingNodeData, tipsTemplate(), node.attr().data)
        show.tips = true
    })
    graph.on('node:mouseleave', ({ node }) => {
        show.tips = false
    })
})

</script>